import { hasPermission, addVueCss, normalizeAuthConfig } from './index.js';
import {  h } from 'vue';

// console.log(normalizeStyle);


/**
 * 权限组件
 * 
 */
export default {
  install(app) {
    app.component('ex-permission', this);
  },
  props: {
    // 权限，可以是字符串或数组
    code: { type: [String, Array], required: true },
    // 逻辑，and 或 or, 多个code时生效
    logic: { type: String, default: 'and' },
    /**
     * 控制原组件没权限的处理方式:
     * remove：移除元素
     * invalid: 设置为无效，禁止使用
     * invalid-abs: 设置为绝对无效，禁止使用
     * hide：隐藏
     * hide-abs：绝对隐藏
     */
    noAccess: { type: String },
    /* 
      无权限时为原组件添加的class，使用vue自动处理格式，如果存在 component 或 no-access 插槽则无效
    */
    class: [String, Array, Object],
    /**
     * 无权限时为原组件添加的style，使用vue自动处理格式，如果存在 component 或 no-access 插槽则无效
     */
    style: [String, Array, Object],
    /**
     * 无权限时的组件
     */
    component: Object,
    tip: {type: [Boolean, String], default: false}
  },
  /**
   * 
   * @param {Object} thisProxy - 当前组件实例的代理对象
   * @param {Array} renderCache - 渲染缓存（优化重复渲染）
   * @param {Object} props - 组件的  数据（开发环境下是浅只读的）
   * @param {Object} setupState - `setup()` 返回的响应式状态
   * @param {Object} data - 组件选项式 API 的 `data()` 返回值
   * @param {Object} ctx - 上下文对象（包含 `attrs`、`slots`、`emit` 等）
   */
  render(thisProxy, renderCache, props, setupState, data, ctx) {

    // console.log('thisProxy', thisProxy);
    // console.log('renderCache', renderCache);
    // console.log('props', props);
    // console.log('setupState', setupState);
    // console.log('data', data);
    // console.log('ctx', ctx);
    let config = normalizeAuthConfig(props);
    
    if (hasPermission(config.code, config.logic, config.tip)){
      if (ctx.$slots){
        return ctx.$slots.default();
      } else if (ctx._){
        return ctx._.slots.default();
      } else {
        return null;
      }
    }
    
    // 是否存在component 或 no-access插槽
    if(thisProxy.component){
      return h(thisProxy.component, {code: config.code, logic: config.logic});
    } else if(thisProxy.$slots.noAccess){ // 插槽
      return thisProxy.$slots.noAccess({code: config.code, logic: config.logic});
    }

    if(config.css.class || config.css.style){
      let vnodes = ctx.$slots.default();
      console.log(vnodes);
      return addVueCss(vnodes, config.css);
    }

    return [];

  }
};
